<template>
    <li class="listli" @click="toDetails(data.id)">
        <div class="hide">
            <img src="../assets/img/section_hot.png" alt="" v-show="data.isHotSale">
            <img src="../assets/img/section_new.png" alt="" v-show="data.isLatest">
        </div>
        <img :src="imgUrl + data.coverImg" alt="">
        <h1>{{ data.name }}</h1>
        <p>{{ data.coin }}
            <img src="../assets/img/monad.png" width="20px" alt="">
        </p>
        <div class="box1">立即兑换</div>
    </li>
</template>

<script>
export default {

    props: ["data"],
    data() {
        return {

        };
    },
    methods: {
        toDetails(id) {
            this.$router.push("/details?id=" + id)
        }
    },
};
</script>

<style lang="less" scoped>
.hide {

    position: absolute;
    top: 0;
    left: 0;

}

.listli {
    text-align: center;
    position: relative;
    font-size: 18px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    color: #333333;

    img {
        vertical-align: middle;
    }

    h1 {
        margin-top: 20px;
        font-weight: 800;
        font-size: 18px;
    }

    p {
        margin: 15px;
        font-weight: bold;
        color: #FD604D;
    }

    .box1 {
        width: 100px;
        height: 36px;
        border: 1px solid #0A328E;
        margin: auto;
        line-height: 36px;
        color: #0A328E;
        font-weight: 800;
    }
}
</style>